<template>
  <div class="container">
    <h3>角色列表</h3>
    <el-form :model="user" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="用户名">
            <el-input
              v-model="user.userName"
              size="medium"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4" style="margin-left: 20px">
          <el-form-item label="姓名">
            <el-input v-model="user.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4" style="margin-left: 20px">
          <el-form-item label="手机号">
            <el-input
              v-model="user.phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4" style="margin-left: 20px">
          <el-form-item label="用户状态">
            <el-select v-model="user.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="9">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="user.createTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="9">
          <el-form-item label="更新时间" style="margin-left: 20px">
            <el-date-picker
              v-model="user.updateTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-button
            type="success"
            icon="el-icon-plus"
            size="medium"
            @click="handleInsert"
             v-if="$hasBP('bnt.user.insert')"
            >添加</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-search"
            size="medium"
            @click="search"
            >搜索</el-button
          >
          <el-button
            type="info"
            icon="el-icon-thumb"
            size="medium"
            @click="reset"
            >重置</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete-solid"
            size="medium"
            @click="batchDel"
            v-if="delUserList.length > 1"
            >批量删除</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <el-table
      v-if="$hasBP('bnt.user.list')"
      :data="userList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120" align="center">
      </el-table-column>
      <el-table-column
        prop="headUrl"
        label="用户头像"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.headUrl"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        min-width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="270"
        align="center"
        style="margin-right: 40px"
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-if="$hasBP('bnt.user.delete')"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="primary"
            v-if="$hasBP('bnt.role.grant')"
            @click="handleGrant(scope.row)"
            >角色</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col style="text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[3, 5, 7]"
          :page-size="searchForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <insert-edit-dialog
      :dialogParam="dialogParam"
      :getAllUser="getAllUser"
    ></insert-edit-dialog>

    <grant-user-role-dialog
      :userRoleDialog="userRoleDialog"
      v-if="userRoleDialog.dialogVisible"
    ></grant-user-role-dialog>
  </div>
</template>

<script>
import { index, deleteUser, getUserRole } from "@/api/user/user";
import insertEditDialog from "@/components/User/insertEditDialog.vue";
import grantUserRoleDialog from "@/components/User/grantUserRoleDialog.vue";

export default {
  name: "",
  components: { insertEditDialog, grantUserRoleDialog },
  props: {},
  data() {
    return {
      options: [
        {
          value: 1,
          label: "正常",
        },
        {
          value: 0,
          label: "禁用",
        },
      ],
      userRoleDialog: {
        dialogVisible: false,
        roles: [],
        user: {
          username: "",
        },
        checkAll: false,
        isIndeterminate: true,
      },
      searchForm: {
        page: 1,
        limit: 3,
      },
      total: 0,
      user: {
        userName: "",
        name: "",
        phone: "",
        status: "",
        createTime: [],
        updateTime: [],
      },
      userList: [],
      dialogParam: {
        title: "",
        dialogVisible: false,
        user: {
          username: "",
          password: "",
          name: "",
          phone: "",
          headUrl: "",
          description: "",
          status: "",
        },
        state: "",
      },
      delUserList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleGrant(row) {
      //查询出当前用户有哪些权限，当前系统一共有哪些权限
      getUserRole(row).then((res) => {
        this.userRoleDialog.roles = res.data;
        this.userRoleDialog.user = row;
        this.userRoleDialog.dialogVisible = true;
        let num = 0;
        this.userRoleDialog.roles.forEach((role) => {
          if (role.isSelect) {
            num++;
          }
        });
        if (num == this.userRoleDialog.roles.length) {
          this.userRoleDialog.checkAll = true;
          this.userRoleDialog.isIndeterminate = false;
        }
      });
    },
    getAllUser() {
      index(this.searchForm.page, this.searchForm.limit, this.user).then(
        (res) => {
          this.userList = res.data.records;
          this.total = res.data.total;
        }
      );
    },
    batchDel() {
      deleteUser(this.delUserList).then((res) => {
        if (res.data) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
        this.getAllUser();
      });
    },
    handleSelectionChange(value) {
      this.delUserList = value;
    },
    handleCurrentChange(value) {
      this.searchForm.page = value;
      this.getAllUser();
    },
    handleSizeChange(value) {
      this.searchForm.limit = value;
      this.getAllUser();
    },
    reset() {
      this.user = {
        userName: "",
        name: "",
        phone: "",
        status: "",
        createTime: [],
        updateTime: [],
      };
      this.searchForm = {
        page: 1,
        limit: 3,
      };
      this.getAllUser();
    },
    search() {
      this.getAllUser();
    },
    handleEdit(row) {
      (this.dialogParam = {
        title: "",
        dialogVisible: false,
        user: {
          username: "",
          password: "",
          name: "",
          phone: "",
          headUrl:
            "https://xiao-pet-adoption.oss-cn-hangzhou.aliyuncs.com/default-head-image/ikun.png",
          description: "",
          status: 1,
        },
        state: "",
      }),
        (this.dialogParam.title = "用户修改");
      this.dialogParam.dialogVisible = true;
      this.dialogParam.user = row;
      this.dialogParam.state = "update";
    },
    handleDelete(row) {
      this.delUserList = [];
      this.delUserList.push(row);
      deleteUser(this.delUserList).then((res) => {
        if (res.data) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
        this.getAllUser();
      });
    },
    handleInsert() {
      (this.dialogParam = {
        title: "",
        dialogVisible: false,
        user: {
          username: "",
          password: "",
          name: "",
          phone: "",
          headUrl:
            "https://xiao-pet-adoption.oss-cn-hangzhou.aliyuncs.com/default-head-image/ikun.png",
          description: "",
          status: 1,
        },
        state: "",
      }),
        (this.dialogParam.title = "用户添加");
      this.dialogParam.dialogVisible = true;
      this.dialogParam.state = "insert";
    },
  },
  created() {
    this.getAllUser();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.container {
  margin-left: 30px;
}
</style>